<template>
  <div class="modernization">
    <Banner></Banner>
    <mainContent :catname="title">
      <div slot="menu_list">
        <dl>

          <dt class="menu_dt" :style="{backgroundImage: 'url(' + menu_bg + ')'}"><span class="iconfont icon-kexue"></span>{{title}}</dt>



          <dd v-for="(item,index) in new_menu_list" :class="active==index?'menu_dd hover':'menu_dd'"
              @click="ToNewPath(item,index)">{{item.title}}
          </dd>

          <!--<dd class="menu_dd" :class="{'hover':cur_tab == 0}">-->
            <!--<router-link :to="{name: 'OurLine'}">文明实践</router-link>-->
          <!--</dd>-->
          <!--<dd class="menu_dd" >-->
            <!--<router-link :to="{name: 'GridMap'}">数字网格</router-link>-->
          <!--</dd>-->
         <!---->


        </dl>
      </div>
      <div slot="inner_content" style="box-sizing: border-box;padding-top: 60px;padding-left: 30px;">
        <div class="page_con">
          <router-view v-if="is_flag==2"  @childData="getImage"></router-view>
          <div v-if="is_flag==1" class="right">
            <div v-for="(item,index) in dynamicList" :key="index" @click="toPath(item.id)" class="dynamic_list">
              <p style="color: black;font-size: 30px">{{item.title}}</p>
              <!--<div class="desc" style="color: #8b8c8b;font-size: 24px;overflow: hidden" v-html="item.content"></div>-->
              <p style="font-size: 28px;color: #a3afb7;text-align: right">{{item.create_at }}</p>
            </div>

          </div>
          <div v-if="is_flag==0"  v-html="new_rich_content"></div>

        </div>
      </div>
    </mainContent>
    <MainMenu></MainMenu>
    <footerBar></footerBar>
  </div>
</template>

<script>
  import Banner from '../../components/bannder/Banner'
  import MainMenu from '../../components/mainmenu/MainMenu'
  import mainContent from '../../components/content/mainContent'
  import footerBar from '../../components/content/footerBar'

  export default {
    name: "Modernization",
    data() {
      return {
        new_menu_list:[],//新列表的菜单数组
        active:0,//当前的激活选项，默认为0
        new_rich_content:'',//新的富文本内容
        is_flag:0,//判断文章的显示状态，0文章页，1列表，
        dynamicList: [],//富文本数据
        rich_info:'',//通用栏目富文本数据




        status:false,//判断是否显示暂无数据
        cur_tab: 0,
        catList: [],
        flag: false,//判断是否显示治理现代化显示检测视频
        menu_bg:'',
        title:'',
        title_detail:'',//跳往详情页面的标题


      }
    },
    components: {
      Banner,
      MainMenu,
      mainContent,
      footerBar
    },

    watch: {
      //监听相同路由下参数变化的时候，从而实现异步刷新
      '$route'(to, from) {
        this.type = this.$route.query.type;
        this.$router.go(0);
      },
    },




    created() {
      this.menu_bg=this.$util.storage.get("menu_bg");
      this.title=this.$route.query.name;
      console.log('当前路由this.$route,', this.$route.path);

      // this.getCatList();
      this.getColumnContent();

    },




    methods: {

      ToNewPath(item,index){
        this.active=index;
        this.title_detail=item.title;
        console.log('点击获得的item值为：',item);
        if (item.is_flag==0) {
          console.log('flag:',item.is_flag);
          this.is_flag=item.is_flag;
          this.new_rich_content=item.content;
        }else if (item.is_flag==1){
          this.is_flag=item.is_flag;

          if (item.link.search("govern")!=-1){
            let that = this;
            let pid = that.$util.getUrlParam('pid',item.link);
            let type = that.$util.getUrlParam('type',item.link);
            console.log('pid',pid);
            console.log('type',type);
            that.$http.get("/api/Screen/getColumnContent2",{pid:pid ,type:type,page:1,limit: 10000,vollege_id:that.$util.vollege_id},r=>{
              console.log('获取到的列表页数据为：',r.data.data);
              that.dynamicList=r.data.data;
            });

          }else{
            let that = this;
            that.$http.get("/api/Screen/getColumnContent2",{pid:item.id,type:item.type,page:1,limit: 10000,vollege_id:that.
                $util.vollege_id},r=>{
              console.log('获取到的列表页数据为：',r.data.data);
              that.dynamicList=r.data.data;
            });
            console.log('flag:',item.is_flag)
          }



        } else if(item.is_flag==2 || item.is_flag==4){
          console.log('flag:',item.is_flag);
          if (item.link.search("go")!=-1){
            this.$router.push(item.link);
          }else{
            this.$router.push({ path:item.link, query: { name: item.title,pid:item.id,type:item.type}});
          }

        }



      },

      toPath(id) {
        console.log('进入详情页面：', id);
        this.$router.push("/detail?id=" + id+"&name="+this.title_detail);
      },//点击进入详情页面


      getColumnContent(){
        let that = this;
        that.$http.get("/api/Screen/getColumnContent2",{pid:that.$route.query.pid,type:that.$route.query.type,page:1,limit:
            10000,vollege_id:that.$util.vollege_id},r=>{
          console.log('获取新栏目的数据为：',r.data.data);
          console.log('获取新栏目的富文本为：',r.data.info);
          that.new_menu_list=r.data.data;
          if(r.data.info.length!=0 || r.data.data[0].is_flag==0){
            that.new_rich_content=r.data.info.replace(/ /g,'').length!=0?r.data.info:r.data.data[0].content;
          }

        });

      },//获取栏目菜单，类型为文章页，列表页，混合页


      getImage(data){
        console.log('子组件向父组件传递过来的值：',data);
        this.cur_tab=data
      },
      tomonitor() {
        console.log('点击了监控视频');
        // this.cur_tab = 4;
        this.cur_tab = 4;

      },
      onTab(event) {
        this.cur_tab = event;
        // this.getList();
      },

      changFlag() {
        console.log('点击了改变状态');
        this.flag = false;
      },
      getCatList() {
        let that = this;
        that.$http.get('/api/WxProgramApi/getGovern?type=1', {vollege_id: that.$util.vollege_id}, r => {
          console.log('栏目名称：', r)
          that.catList = r.data;
        })
      },
    }
  }
</script>

<style scoped>
  .modernization {
    width: 100vw;
    height: 1080px;
    background: url("../../assets/images/banner/bg_banner1.jpg") center top no-repeat;
  }

  .inner_content {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 60px !important;
    padding-left: 50px !important;
  }

  .page_con {
    font-size: 24px !important;
    line-height: 40px !important;
    padding-right: 0px !important;
    width: 1300px !important;
    box-sizing: border-box;
  }







  .right {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding-left: 10px;
  }

  .dynamic_list {
    margin-bottom: 15px;
    width: 100%;
    height: 120px;
    box-sizing: border-box;
    padding-left: 10px;
    border-bottom: 2px solid #cccccc;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }


</style>
